<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/axios.min.js"></script>
    <!-- page.js 的导入必须位于 vue.min.js 下面-->
    <script src="page.js"></script>
</head>
<body>
<div id="a" style="margin-bottom: 200px">

    <table>
        <!-- 展示分页数据-->
        <tr>
            <th>编号</th><th>标题</th><th>时间</th><th>内容</th>
        </tr>
        <tr v-for=" row in result.data">
            <td>{{row.id}}</td>
            <td>{{row.title}}</td>
            <td>{{row.intime}}</td>
            <td>
                <div style="max-width: 200px; max-height: 20px; overflow: hidden">
                {{row.content}}
                </div>
            </td>
        </tr>

    </table>
    <el-pagination ref="p" @page-change="query"
           background page-size="10" current-page="1"
           :total="result.total"
           layout="first, prev, pager, next, last">
    </el-pagination>

</div>
<script>
    var v = new Vue({
        el :"#a",
        data : {
            result : {}
        },
        created(){
            axios.get(`../../QueryNewsServlet.s?currentPage=1&pageSize=10`).then( res=>{
                // res 就是后台返回的数据, 但是
                // res.data ==> { data, tatol  }
                this.result = res.data;
            } );
        },
        methods:{
            query(curPage){
                axios.get(`../../QueryNewsServlet.s`,{
                    params : {
                        currentPage : curPage,
                        pageSize : this.$refs.p.pageSize
                    }
                }).then( res=>{
                    this.result = res.data;
                } );
            }
        }
    })
</script>



</body>
</html>